import React, { Component } from 'react'

import PropType from 'prop-types';

import TabControl from './TabControl'

export default class App extends Component {

  constructor(props) {
    super(props)
    // 不变的数据单独放
    this.titles = ["新款", "精选", "热门"]
    // state通常存放会变的数据
    this.state = {
      currentTitle: "新款", 
    }
  }

  render() {
    const {currentTitle} = this.state

    return (
      <div>
        <TabControl itemClick={index => this.itemClick(index)} titles={this.titles}></TabControl>
        <h2>{currentTitle}</h2>
      </div>
    )
  }

  itemClick(index) {
    this.setState({
      currentTitle: this.titles[index]
    })
    console.log(index)
  }
}

TabControl.PropType = {
  titles: PropType.array.isRequired
}

